<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import * as echarts from 'echarts'
import 'echarts-wordcloud'

const selectedCountry = ref('不选择')
const selectedYear = ref('不选择')
const countryList = ref([])
const yearList = ref([])

// 获取国家列表
const getCountryList = async () => {
  try {
    const response = await axios.get('http://127.0.0.1:5000/select_list_region')
    if (response.data.success) {
      countryList.value = response.data.data
    }
  } catch (error) {
    console.error('获取国家列表失败：', error)
  }
}

// 获取年份季节列表
const getYearList = async () => {
  try {
    const response = await axios.get('http://127.0.0.1:5000/get_games_list')
    if (response.data.success) {
      yearList.value = response.data.data
    }
  } catch (error) {
    console.error('获取年份季节列表失败：', error)
  }
}

// 获取运动项目数据并绘制图表
const getSportsData = async () => {
  try {
    const response = await axios.get('http://127.0.0.1:5000/get_top_sports', {
      params: {
        country: selectedCountry.value,
        year: selectedYear.value
      }
    })
    if (response.data.success) {
      drawFunnelChart(response.data.data.picture_data)
      drawWordCloud(response.data.data.world_data)
    }
  } catch (error) {
    console.error('获取运动项目数据失败：', error)
  }
}

// 绘制沙漏图
const drawFunnelChart = (data) => {
  const funnelChart = echarts.init(document.getElementById('funnelChart'))
  const colors = [
    '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de',
    '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#4682B4'
  ]
  const option = {
    title: {
      text: '项目分布沙漏图',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}'
    },
    legend: {
      top: 'bottom'
    },
    series: [{
      name: '项目',
      type: 'funnel',
      left: '10%',
      top: 60,
      bottom: 60,
      width: '80%',
      min: 0,
      max: 100,
      minSize: '0%',
      maxSize: '100%',
      sort: 'none',
      gap: 2,
      label: {
        show: true,
        position: 'right'
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: 'solid'
        }
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      emphasis: {
        label: {
          fontSize: 20
        }
      },
      data: data.map((item, index) => ({
        name: item,
        value: 100 - index * 10,
        itemStyle: {
          color: colors[index]
        }
      }))
    }]
  }
  funnelChart.setOption(option)
}

// 绘制词云图
const drawWordCloud = (data) => {
  const wordCloudChart = echarts.init(document.getElementById('wordCloudChart'))
  const option = {
    title: {
      text: '国家强势项目词云图',
      left: 'center'
    },
    series: [{
      type: 'wordCloud',
      shape: 'circle',
      left: 'center',
      top: 'center',
      width: '70%',
      height: '80%',
      right: null,
      bottom: null,
      sizeRange: [12, 60],
      rotationRange: [-90, 90],
      rotationStep: 45,
      gridSize: 8,
      drawOutOfBound: false,
      textStyle: {
        fontFamily: 'sans-serif',
        fontWeight: 'bold',
        color: function () {
          return 'rgb(' + [
            Math.round(Math.random() * 160),
            Math.round(Math.random() * 160),
            Math.round(Math.random() * 160)
          ].join(',') + ')'
        }
      },
      emphasis: {
        textStyle: {
          shadowBlur: 10,
          shadowColor: '#333'
        }
      },
      data: data.map(item => ({
        name: item,
        value: Math.round(Math.random() * 100 + 100)
      }))
    }]
  }
  wordCloudChart.setOption(option)
}

// 监听选择变化
const handleSelectionChange = () => {
  getSportsData()
}

onMounted(() => {
  getCountryList()
  getYearList()
  getSportsData()
})
</script>

<template>
  <div class="component-five">
    <div class="selectors">
      <select v-model="selectedYear" @change="handleSelectionChange">
        <option v-for="year in yearList" :key="year" :value="year">{{ year }}</option>
      </select>
      <select v-model="selectedCountry" @change="handleSelectionChange">
        <option v-for="country in countryList" :key="country" :value="country">{{ country }}</option>
      </select>
    </div>
    <div id="funnelChart" class="chart"></div>
    <div id="wordCloudChart" class="chart"></div>
  </div>
</template>

<style scoped>
.component-five {
  padding: 20px;
}

.selectors {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

select {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  width: 200px;
}

.chart {
  width: 100%;
  height: 400px;
  margin-bottom: 20px;
}
</style>
